<template>
  <div class="albumContainer">
    <div class="albumContent">
      <div class="albumItemBox" v-for="item in albumList" :key="item.id">
        <div class="poster">
          <div class="bg"></div>
          <div class="posterImg">
            <img :src="item.picUrl" alt="" />
          </div>
        </div>
        <div class="albumDesc">
          <h2>{{ item.name }}</h2>
          <p>{{ item.singer }}</p>
          <p>发行时间{{ item.publishTime }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "AlbumList",
});
</script>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import request from "../../../utils/request";
import { useRoute } from "vue-router";
import moment from "moment";
const props = defineProps(["currentPage"]);
const route = useRoute();
const albumList = ref([]);
onMounted(() => {
  request("/artist/album", { id: route.params.id, limit: 15 }).then((result) => {
    albumList.value = result.data.hotAlbums.map((item) => ({
      id: item.id,
      picUrl: item.picUrl,
      name: item.name,
      publishTime: moment(item.publishTime).format("YYYY-MM-DD"),
      singer: item.artist.name,
    }));
  });
});
watch(
  () => {
    return props.currentPage;
  },
  () => {
    request("/artist/album", {
      id: route.params.id,
      limit: 15,
      offset: (props.currentPage - 1) * 15,
    }).then((result) => {
      albumList.value = result.data.hotAlbums.map((item) => ({
        id: item.id,
        picUrl: item.picUrl,
        name: item.name,
        publishTime: moment(item.publishTime).format("YYYY-MM-DD"),
        singer: item.artist.name,
      }));
    });
  }
);
</script>
<style lang="less">
.albumContainer {
  width: 100%;
  .albumContent {
    display: flex;
    flex-wrap: wrap;
    width: 1230px;
    margin: 0 auto;
    .albumItemBox {
      flex-grow: 1;
      width: 216px;
      margin: 0 30px 50px 0;
      cursor: pointer;
      font-weight: 400;
      &:hover {
        .poster {
          .bg {
            right: -40px;
          }
        }
      }
      .poster {
        position: relative;
        width: 192px;
        height: 192px;
        .bg {
          position: absolute;
          z-index: -1;
          top: 50%;
          transform: translateY(-50%);
          right: -24px;
          width: 180px;
          height: 180px;
          background-image: url(https://static1-music.taihe.com/client/img/f412d65.png);
          background-size: 100%;
          transition: right 1s;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .albumDesc {
        margin-top: 18px;
        h2 {
          font-size: 16px;
          font-weight: 400px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #303133;
        }
        p {
          margin-top: 6px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 14px;
          font-weight: 400px;
          color: #909399;
        }
      }
    }
  }
}
</style>
